<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="huaicheng151201@163.com"/>
    <meta name="keywords" content="HTML,PHP,SQL"/>
    <meta name="description" content=""/>
    <meta name="revised" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title>热门歌手</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/hot.css">
    <style>
        header{width:100%;height:auto;position:fixed;z-index:11;top:0;}
        header>div{width:100%;background-color:#00C0FF;padding:0;}
        header span:nth-child(1){width:8%;vertical-align: middle;}
        header span:nth-child(2){width:79%;color:#fff;font-size:1.6rem;text-align:center;vertical-align: middle;}
        header span:nth-child(3){width:8%;vertical-align: middle;text-align:right;}
    </style>
</head>
<body>
    <header>
        <div>
            <span class="return"><img src="images/return.png" alt="" style="width:40%;"></span>
            <span>热门歌手</span>
            <span class="hide" onclick="javascript:window.location.href='search_all.html'">
                <img src="images/search_all.png" alt="" style="width:60%;">
            </span>
        </div>
    </header>
    <section style="margin-top:52px;">
        <ul id="j-hot-singer">
           <p style="text-align: center;">加载中....</p>
        </ul>
    </section>
    <!--图标-->
    <p class="icon"><img src="images/listen_icon.png" alt="" style="width:15%;"></p>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/touch.0.2.14.min.js"></script>
    <script src="js/lib/template.min.js"></script>
    <script src="js/reqeust.js"></script>
    <script>
        $(function () {
            $(".return").click(function () {
                history.back();
            });
            //热门歌手
            sendByUrl("/GetHotSinger",{pageIndex:1,pageSiz:100},function(res){
                $("#j-hot-singer").html(template("singer-list-temp", {
                    list: res || []
                }));
            });
        })
    </script>
    <!--热门单曲-->
    <script id="singer-list-temp" type="text/html">
        {{each list as item i}}
        <li data-id="{{item.id}}" onclick="javascript:window.location.href = 'singer_album.html?id={{item.id}}'">
            <div class="singer_img"><img src="{{item.head}}" alt="{{item.name}}"></div>
            <div class="singer_con">
                <p>{{item.name}}</p>
                <p><img src="images/arrow.png" alt=""></p>
            </div>
        </li>
        {{/each}}
    </script>
</body>
</html>